<template>
  <div id="Rights">
    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 权限列表 -->
      <el-table
        :data="rightsList"
        border
        stripe
        size="small"
        style="width: 100%"
        :highlight-current-row="true"
      >
        <el-table-column label="#" type="index" width="50" align="center" />
        <el-table-column label="权限名称" prop="authName" align="center" />
        <el-table-column label="路径" prop="path" align="center" />
        <el-table-column label="权限等级" prop="level" align="center">
          <template slot-scope="scope">
            <el-tag
              size="small"
              effect="dark"
              :type="scope.row.level === '0'?'':scope.row.level === '1'?'success':scope.row.level === '2'?'warning':''"
            >
              {{ scope.row.level === "0"? '一级':scope.row.level === "1"? '二级':scope.row.level === "2"? '三级':'' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Rights',
  data() {
    return {
      rightsList: [] // 所有权限列表
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {
    this.GetData() // 获取数据
  },

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 获取数据 1.4.1
    // rights/:type
    // type: list 或 tree , list 列表显示权限, tree 树状显示权限
    async GetData() {
      const { data: resData } = await this.$http.get('rights/' + 'list')
      if (resData.meta.status !== 200) {
        this.$message.error(resData.meta.msg)
      } else {
        console.log('获取列表数据', resData)
        this.rightsList = resData.data
      }
    }
  }
}
</script>

<style style lang='scss' scoped>

</style>
